<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />

    <link rel="stylesheet" href="css/font-awesome.css" />
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/jquery.cookie.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #eeeeee;
        }
        .navbar-text a  {
            color: #ffffff;
        }
        .login-text {
            margin-right: 50px;
        }
        .logo {
            color: #E94F4C;
            font-size: 35px;
            display: inline-block;
        }
        .search-box {
            height: 48px;
        }
        .input-group-addon {
            background-color:#E94F4C;
            border: none;
            color: #ffffff;
        }
        .control-icon {
            position: absolute;
            top: 50%;
        }
        .mgt38 {
            margin-top: 30px;
        }
        .thumbnail a img {
            height: 200px;
            width: 200px;
        }
        .thumbnail .description {
            height: 40px;
            overflow: hidden;
        }
        a:hover {
            text-decoration: none;
        }
        h3, p {
            text-align: center;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="前端首页.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i> 寻欢易购</a>
        </div>
        <p class="navbar-text navbar-right login-text">
            <a href="login.html">登录</a>
        </p>
        <p class="navbar-text navbar-right">
            <a href="register.html">注册</a>
        </p>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-push-3">
            <div class="panel panel-danger login-panel">
                <div class="panel-heading">
                    <!-- 面板的头部内容 -->
                    <h3 class="panel-title">用户登录</h3>
                </div>
                <div class="panel-body">
                    <form onsubmit="javascript: return false;">
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <input type="text" class="form-control" autocomplete="off" id="username">
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="password" class="form-control" autocomplete="off" id="password">
                        </div>
                        <div class="form-group">
                            <button onclick="userLogin()" class="btn btn-danger btn-block">登录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function userLogin() {
        var username = $('#username').val();
        var password = $('#password').val();
        //登录验证
        $(function () {
            $.ajax({
                url: 'http://localhost:8080/loginUser/'+username+'/'+password,
                type: 'get',
                dataType: 'json',
                // data: {username: username, password: password},
                success: function (_data) {
                    console.log(_data);
                    // 如果用户登录
                    var code = _data.code;
                    if (code == 1) {
                        alert("欢迎您，登录成功");
                        $.cookie("frontedUsername",username);
                    }else if (code == 2){
                        showErrorBox("登录失败，密码错误");
                        return;
                    }else if (code == 3) {
                        showErrorBox("登录失败，用户名错误或不存在");
                        return;
                    }
                    window.location.href = "前端首页.html";
                }
            })
        });
    }

    // 显示错误提示信息
    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频
        })
    }


</script>
</html>